compose-area {
    > div {
        box-shadow: 0 -2px 4px -2px rgba(0, 0, 0, .2);

        &:first-child {
            display: flex;
            flex-direction: row;
            margin: 0;
            max-height: calc(1.3em * 7);

            > div {
                align-content: center;
                justify-content: center;
                margin: $main-padding $main-padding $main-padding 0;

                &:first-child {
                    margin-left: $main-padding;
                }

                &:nth-of-type(2) {
                    flex-grow: 1;
                    border: 1px solid $border-grey;
                    border-radius: $material-radius;
                    background-color: $light-background-color;
                    overflow-x: hidden;
                    overflow-y: auto;

                    // This is where the user enters text
                    div.compose {
                        top: 0;
                        left: 0;
                        outline: none;
                        cursor: text;
                        padding: $main-padding;
                        min-height: 22px;
                        max-height: 100%;
                        line-height: 20px;
                        white-space: pre-wrap;

                        // show placeholder if field is on focus
                        &:empty {
                            &::before {
                                display: block;
                                color: $active-placeholder-color;
                                content: attr(data-placeholder);
                            }
                        }
                    }
                }

                &:first-child,
                &:last-child {
                    padding-top: $main-padding;
                    text-align: center;
                }
            }

            // configure all triggers
            .trigger {
                opacity: .5;

                &::selection {
                    background: #ffffff;
                }

                &.is-enabled {
                    cursor: pointer;

                    &:hover {
                        opacity: 1;
                    }
                }

                &.is-active {
                    opacity: 1;
                }

                &:not(.is-enabled) {
                    opacity: .1;
                }
            }

            .file-input {
                position: absolute;
            }
        }
    }

    // On dragover
    &.is-dragover div.compose {
        border: 4px dashed #d3d3d3;
        text-align: center;
        line-height: $footer-height - 20px;
        font-size: 1.4em;
        font-weight: 300;
    }

    // Emoji picker window
    .emoji-keyboard {
        transform: scale(1);

        &:not(.active) {
            display: none;
            max-height: 0;

            .tab {
                float: none;
            }
        }
    }
}
